<script lang="ts" setup>
import { ref, watch, reactive, nextTick } from "vue";
import appMenuTreeNoButton from "./app-menu-tree-no-button.vue";
import appMenuTreeNewDialog from "./app-menu-tree-new-dialog.vue";
import { ElMessage } from "element-plus";

const emit = defineEmits<{
  (e: "update:visible", val: boolean): void;
  (e: "save-success", node: any[], btn: any[]): void; //新增保存 修改保存 成功回调
}>();

const props = defineProps({
  //是否显示
  visible: {
    type: Boolean,
    default: false
  }
});
const appMenuTreeNoButtonRef = ref();

//设置是否显示双向绑定
const visibleModelValue = ref(props.visible);
watch(
  () => props.visible,
  val => {
    visibleModelValue.value = val;
    if (val) {
      nextTick(() => {
        appMenuTreeNoButtonRef.value.loadTree();
      });
      appMenuTreeNoButtonDialogState.tags = [
        {
          name: "查看",
          code: "view"
        },
        {
          name: "保存",
          code: "save"
        },
        {
          name: "删除",
          code: "delete"
        }
      ];
    }
  }
);
watch(visibleModelValue, val => {
  emit("update:visible", val);
});

const appMenuTreeNoButtonDialogState = reactive({
  currentData: {},
  newVisible: false,
  tags: [] as any[],
  //关闭事件
  handleClose: () => {
    visibleModelValue.value = false;
  },
  //触发表单保存
  onOkButtonClick: () => {
    const nodes = appMenuTreeNoButtonRef.value.getCheckedNodes();
    const btn = appMenuTreeNoButtonDialogState.tags;
    emit("save-success", nodes, btn);
  },
  handleTagDelete: (code: string) => {
    appMenuTreeNoButtonDialogState.tags = appMenuTreeNoButtonDialogState.tags.filter((e: any) => e.code != code);
  },
  addBtn: () => {
    appMenuTreeNoButtonDialogState.currentData = {};
    appMenuTreeNoButtonDialogState.newVisible = true;
  },
  // 添加按钮
  saveButton: (data: any) => {
    const res = appMenuTreeNoButtonDialogState.tags.filter((e: any) => e.name == data.name && e.code == data.code);
    if (res && res.length > 0) {
      ElMessage({ type: "warning", message: "按钮名称或者编码已存在" });
      return false;
    }
    appMenuTreeNoButtonDialogState.tags.push(data);
    appMenuTreeNoButtonDialogState.newVisible = false;
  },
  show: (data: any) => {
    appMenuTreeNoButtonDialogState.currentData = data;
    appMenuTreeNoButtonDialogState.newVisible = true;
  }
});
</script>
<template>
  <div class="jxtech-dialog-form">
    <el-dialog
      v-model="visibleModelValue"
      title="选择菜单"
      width="60%"
      destroy-on-close
      :before-close="appMenuTreeNoButtonDialogState.handleClose"
    >
      <el-row :gutter="24">
        <el-col :span="10">
          <div class="select_div">
            <el-tag
              v-for="tag in appMenuTreeNoButtonDialogState.tags"
              :key="tag.code"
              class="select_tag"
              closable
              :disable-transitions="false"
              @click="appMenuTreeNoButtonDialogState.show(tag)"
              @close="appMenuTreeNoButtonDialogState.handleTagDelete(tag.code)"
            >
              {{ tag.name }}
            </el-tag>
            <el-button type="primary" size="small" @click="appMenuTreeNoButtonDialogState.addBtn"> + 添加按钮 </el-button>
          </div>
        </el-col>
        <el-col :span="14">
          <app-menu-tree-no-button ref="appMenuTreeNoButtonRef" :show-checkbox="true"></app-menu-tree-no-button>
        </el-col>
      </el-row>

      <template #footer>
        <jxtech-cancel-button @click="appMenuTreeNoButtonDialogState.handleClose"></jxtech-cancel-button>
        <jxtech-ok-button @click="appMenuTreeNoButtonDialogState.onOkButtonClick"></jxtech-ok-button>
      </template>
    </el-dialog>
    <app-menu-tree-new-dialog
      v-model:visible="appMenuTreeNoButtonDialogState.newVisible"
      :data="appMenuTreeNoButtonDialogState.currentData"
      @save-success="appMenuTreeNoButtonDialogState.saveButton"
    ></app-menu-tree-new-dialog>
  </div>
</template>

<style lang="scss" scoped>
.select_div {
  padding: 10px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  .select_tag {
    margin: 10px 5px;
    cursor: pointer;
  }
}
</style>
